<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>22_案例练习-版心设置</title>

        <style>
            /* 将所有的标签的内外边距清除 */
            * {
                margin: 0;
                padding: 0;
            }


            /* 给定浮动选择器 
               当你写完浮动之后  女朋友都不要想 忘了他  要想到清除浮动
            */
            .leftFloat {
                float: left;
            }

            .rightFloat {
                float: right;
            }

            .clearBox::after {
                content: "";
                clear: both;
                display: block;
            }



            /* (1) 版心设置 */
            #container {
                width: 960px;
                /* 版心居中 */
                margin: 0 auto;
                /* 版心中文字居中 */
                text-align: center;
            }

            /* （2）头部导航header样式设置 */
            #container .header .logo {
                width: 200px;
                height: 80px;
                background-color: #ccc;
                margin-right: 10px;
            }


            #container .header .banner1 {
                width: 540px;
                height: 80px;
                background-color: #ccc;
            }

            #container .header .banner2 {
                width: 200px;
                height: 80px;
                background-color: #ccc;
            }

            /* （3）菜单 menu */
            #container .menu {
                margin-top: 10px;
                margin-bottom: 10px;
                width: 960px;
                height: 30px;
                background-color: #ccc;

            }

            /* （4）栏目 nav */
            #container .nav .nav-left .nav-left-top div {
                width: 368px;
                height: 198px;
                border: 1px solid #ccc;
            }

            #container .nav .nav-left .nav-left-top .nav-left-top-one {
                margin-right: 10px;
            }
        </style>

    </head>
    <body>
        <div id="container">
            <!-- （2）头部导航 -->
            <div class="header clearBox">
                <div class="logo leftFloat">LOGO</div>
                <div class="banner1 leftFloat">BANNER1</div>
                <div class="banner2 rightFloat">BANNER2</div>
            </div>

            <!-- （3）菜单 menu-->
            <div class="menu">菜单</div>


            <!-- （4）左上 -->
            <!-- （5）左下 -->
            <!-- （5）右 -->

            <div class="nav">
                <!-- 左 -->
                <div class="nav-left">
                    <!-- 左上 -->
                    <div class="nav-left-top clearBox">
                        <div class="nav-left-top-one leftFloat">栏目一</div>
                        <div class="leftFloat">栏目二</div>
                    </div>
                    <!-- 左下 -->
                    <div>
                        
                    </div>
                </div>
                <!-- 右 -->
                <div></div>
            </div>


            

        </div>
    </body>
</html>